<template>
  <div class="SiderMenu">
    <div class="logo">
      <img src="../assets/logo.png" alt />
      <span v-if="!collapsed" style="margin-left:10px;">飞迩+</span>
    </div>
    <a-menu
      mode="inline"
      theme="dark"
      @openChange="onOpenChange"
      :selected-keys="[selected]"
      :open-keys="[open]"
    >
      <template v-for="item in menus">
        <a-sub-menu :key="item.menuId" v-if="item.childs">
          <span slot="title">
            <a-icon :type="item.icon" />
            <span>{{item.title}}</span>
          </span>
          <a-menu-item
            v-for="val in item.childs"
            :key="val.menuId"
            @click="itemChange(val)"
          >{{val.title}}</a-menu-item>
        </a-sub-menu>
        <a-menu-item :key="item.menuId" v-else @click="itemChange(item)">
          <a-icon :type="item.icon" />
          <span>{{item.title}}</span>
        </a-menu-item>
      </template>
    </a-menu>
  </div>
</template>

<script>
import Bus from "@/utils/bus";
import menusAry from "@/utils/menus"
export default {
  name: "SiderMenu",
  props: {},
  data() {
    return {
      selected: "",
      open: "",
      collapsed: false,
      logo: require("@/assets/img/logo.png"),
      menus: [],
    };
  },
  created() {
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    Bus.$on("collapsed", (msg) => {
      this.collapsed = msg;
      // bus.$emit("collapse-content", msg);
    });
  },
  computed: {
    path() {
      return this.$route.path;
    },
  },
  watch:{
    path(){
      // this.setMenu();
    },
  },
  mounted() {
    // 遍历菜单,设置默认展开项和选中项

    console.log(JSON.parse(JSON.stringify(menusAry)))
    let temp = JSON.parse(JSON.stringify(menusAry))
    let userInfo = localStorage.getItem("userInfo") || ''
    let userName = userInfo!=''?JSON.parse(userInfo).userName:''
    console.log(userName)
    console.log('=============================')
    if(userName === "BD"){
      let tempMenu = []
      temp.forEach(item => {
        if(item.menuId =="two"){
          let childs = []
          item.childs.forEach(child => {
            if(child.menuId == "two-three"){
              childs.push(child)
            }
          })
          item.childs = childs
          tempMenu.push(item)
        }
        if(item.menuId =="four"){
          let childs = []
          item.childs.forEach(child => {
            if(child.menuId == "four-five"){
              childs.push(child)
            }
          })
          item.childs = childs
          tempMenu.push(item)
        }
      } )
      this.menus = tempMenu
      console.log(tempMenu)
    }else if(userName === "SHC"){
      let tempMenu = []
      temp.forEach(item => {
        if(item.menuId =="two"){
          let childs = []
          item.childs.forEach(child => {
            if(child.menuId == "two-ten" || child.menuId == "two-four"){
              childs.push(child)
            }
          })
          item.childs = childs
          tempMenu.push(item)
        }
        if(item.menuId =="four"){
          let childs = []
          item.childs.forEach(child => {
            if(child.menuId == "four-four" || child.menuId == "four-one"){
              childs.push(child)
            }
          })
          item.childs = childs
          tempMenu.push(item)
        }
      } )
      this.menus = tempMenu
      console.log(tempMenu)
    }else if(userName === "DGC" || userName === "JLC"  || userName === "BSC"){
      let tempMenu = []
      temp.forEach(item => {
        if(item.menuId =="two"){
          let childs = []
          item.childs.forEach(child => {
            if(child.menuId == "two-four"){
              childs.push(child)
            }
          })
          item.childs = childs
          tempMenu.push(item)
        }
        if(item.menuId =="four"){
          let childs = []
          item.childs.forEach(child => {
            if(child.menuId == "four-four" || child.menuId == "four-one"){
              childs.push(child)
            }
          })
          item.childs = childs
          tempMenu.push(item)
        }
      } )
      this.menus = tempMenu
      console.log(tempMenu)
    }else{
      this.menus = JSON.parse(JSON.stringify(menusAry))
    }
    this.setMenu();
  },
  methods: {
    // 监听菜单展开/关闭 (作用:收起其他展开的所有菜单)
    onOpenChange(openKeys) {
      console.log(openKeys);
      this.open = openKeys.length > 0 ? openKeys[openKeys.length - 1] : "";
    },
    // 遍历菜单,设置默认展开项和选中项
    setMenu() {
      console.log(this.$route);
      // 先判断当前路由在菜单列表能不能找到,找到就高亮或者展开相对应的菜单
      this.menus.forEach((item, index) => {
        if (this.$route.path == item.path) {
          this.selected = item.menuId;
          localStorage.setItem("currentMenu", JSON.stringify(item));
        } else {
          if (item.childs) {
            item.childs.forEach((obj, j) => {
              if (this.$route.path == obj.path) {
                this.selected = obj.menuId;
                this.open = item.menuId;
                localStorage.setItem("currentMenu", JSON.stringify(item));
              }
            });
          }
        }
      });
      //  如果上面的操作并没有高亮或者展开任何一个菜单,证明当前的路由跟菜单匹配不上,
      //  就用点击菜单时存好的来匹配(点击菜单的时候会存好当前点击项localStorage)
      if (!this.selected && !this.open) {
        let currentMenu = JSON.parse(localStorage.getItem("currentMenu"));
        this.menus.forEach((item, index) => {
          if (currentMenu.path == item.path) {
            this.selected = item.menuId;
          } else {
            if (item.childs) {
              item.childs.forEach((obj, j) => {
                if (currentMenu.path == obj.path) {
                  this.selected = obj.menuId;
                  this.open = item.menuId;
                }
              });
            }
          }
        });
      }
    },
    itemChange(item) {
      console.log(item);
      this.selected = item.menuId;
      this.$router.push({
        path: item.path,
        query: item.query ? item.query : {},
      });
      localStorage.setItem("currentMenu", JSON.stringify(item));
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/assets/css/base.less";
.logo {
  height: 32px;
  // background: rgba(255, 255, 255, 0.2);
  margin: 16px;
  color: #fff;
  img {
    height: 40px;
    width: 40px;
  }
}
</style>
